<template>
  <n-dropdown @select="handleSelect" :options="options">
    <div class="user">
      <n-avatar :src="userStore.userInfo?.headImg" round> </n-avatar>
      <span>{{ userStore.userInfo?.nickName }}</span>
    </div>
  </n-dropdown>
  <DialogForm
    :schema="editUserJson"
    ref="editUserRef"
    @submit="handleNewFolder"
  ></DialogForm>
  <!-- <editUser v-model="showModal"/> -->
</template>

<script lang="ts" setup>
import { useMainStore } from "@/store";
import { useUserStore } from "@/store/user";
import { NIcon, useMessage } from "naive-ui";
import { useRouter } from "vue-router";
import editUserJson from "@/components/editUser/editorInfo.json";
import DialogForm from "@/components/form-builder/dialog.vue";
import { handleUserInfo } from "@/api/model";
// import editUser from '@/components/editUser/editUser.vue'
import { ref } from "vue";

const router = useRouter();
const showModal = ref(false);
const editUserRef = ref();
const message = useMessage();

import {
  PersonCircleOutline as UserIcon,
  Pencil as EditIcon,
  LogOutOutline as LogoutIcon,
} from "@vicons/ionicons5";
import { Component, h } from "vue";
const renderIcon = (icon: Component) => {
  return () => {
    return h(NIcon, null, {
      default: () => h(icon),
    });
  };
};
const mainStore = useMainStore();
const userStore = useUserStore();
const options = [
  {
    label: "用户资料",
    key: "profile",
    disabled: true,
    icon: renderIcon(UserIcon),
  },
  {
    label: "编辑用户资料",
    key: "editProfile",
    disabled: true,
    icon: renderIcon(EditIcon),
  },
  {
    label: "退出登录",
    key: "logout",
    icon: renderIcon(LogoutIcon),
  },
];
const showLoginPanel = () => {
  // mainStore.openLogin();
  router.push("/home/personCenter");
};
const handleSelect = (key: string | number) => {
  if (key == "profile") {
    showLoginPanel();
  } else if (key == "logout") {
    // router.replace("/login");
    userStore.clearUserInfo();
    mainStore.showLogin = true;
    // window.location.reload();
  } else if (key == "editProfile") {
    console.log("编辑用户资料");
    // showModal.value = true
    editUserRef.value.open();
  }
  // message.info(String(key))
};

const handleNewFolder = async (form: any) => {
  console.log("form", form);
  const data: any = await handleUserInfo(form);
  if (data.code == 1000) {
    message.success("修改成功");
    userStore.userInfo.nickName = form.nickName;
    userStore.userInfo.email = form.email;
    userStore.userInfo.phone = form.phone;
    userStore.userInfo.username = form.username;
  } else {
    message.error(data.message);
  }
};
</script>

<style lang="scss" scoped>
.user {
  display: flex;
  align-items: center;
  cursor: pointer;

  span {
    margin-left: 6px;
  }
}
</style>
